<template>
  <div class="max" style="width: 100%; height: 100vh">
    <div class="top">
      <van-icon name="arrow-left" size="40" @click="$router.back()" />
    </div>
    <div class="video" :key="index">
      <van-swipe :show-indicators="false" style="height: 100vh" vertical>
        <van-swipe-item  v-for="(item, index) in detail" :key="index">
          <video
            ref="video"
            width="375"
            height="100vh"
            controls
            preload
            @click="toggleVideoPlay"
          >
            <source :src="item?.video?.url" type="video/mp4" />
          </video>
          <div class="content">
            <p>{{ item?.title }}</p>
          </div>
          <div class="contright">
            <div class="ttou">
              <div class="imbox">
                <img
                  style="width: 40rem; height: 40rem; border-radius: 50%"
                  :src="item?.user?.avatarurl"
                  alt=""
                />
              </div>
            </div>
            <div class="ttou">
              <div class="imgic">
                <van-icon name="good-job" color="#ffffff" size="25" />
              </div>
              <p>{{ item?.upCount }}</p>
            </div>
            <div class="ttou">
              <div class="imgic">
                <van-icon name="chat" color="#ffffff" size="25" />
              </div>
              <p>{{ item?.shareInfo?.channel }}</p>
            </div>
            <div class="ttou">
              <div class="imgic">
                <img
                  style="width: 25rem; height: 25rem"
                  src="https://p0.meituan.net/moviemachine/7e7aaf09a232efb02ff8697deb522d151367.png"
                  alt=""
                />
              </div>
              <p>分享</p>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script setup>
import axios from "@/api/axios.js";
import { ref, reactive } from "vue";


const toggleVideoPlay=()=> {
      const video = this.$refs.video;
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    }

const getDetail = () =>
  axios.get("https://apis.netstart.cn/maoyan/video/short/0");

const detail = ref([]);
async function update() {
  const { data } = await getDetail();
  detail.value = data.data.feeds;
  // console.log("detail", detail);
}
update();
const loading = false;
const onLoad = () => {
    setTimeout(() => {
      this.getmoreDou();
    }, 1000);
  },
  onRefresh = () => {
    this.finished = false;
    this.loading = true;
    this.onLoad();
  };
const onChange = (index) => {
  // Toast("当前 Swipe 索引：" + index);
  if (this.feeds.length - index == 2) {
    this.getDou();
  }
  // console.log(index);
  // console.log("滑动");
  this.$refs.video.forEach((o) => {
    o.pause();
  });
  this.$refs.video[index].play();
  // console.log(this.$refs.video[index].play());
};
</script>

<style lang="scss" scoped>
.max {
  position: relative;
}
.top {
  width: 100vw;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}
.video {
  position: relative;
}
.content {
  position: absolute;
  bottom: 80rem;
  left: 20rem;
  color: #fff;
  font-size: 19rem;
}
.contrifht {
  position: absolute;
  bottom: 80rem;
  left: 20rem;
  color: #fff;
  font-size: 30rem;
}
.contright {
  position: absolute;
  bottom: 200rem;
  right: 10rem;
  text-align: center;
  font-size: 16rem;
  color: #fff;
  .imgic {
    width: 50rem;
    height: 50rem;
    margin: 10rem 0 5rem;
    border-radius: 50rem;
    background: rgba(0, 0, 0, 0.42);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
